<!DOCTYPE html>
<html id="容器">
	<head>
		<meta charset="utf-8" />
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
		<title>数字恶臭化工具</title>
		<meta name="viewport" content="width=device-width, user-scalable=0" />
		<meta name="discription" content="一个将任意数字解构成 114514 组合公式的工具" />
		<style>
			html{
				text-align: center;
				background: #d0b164;
				color: #412300;
				transition: 1s ease;
				font-family: sans-serif;
				word-break: break-all;
			}
			html[数字=""]{
				background: #b3d0d0;
				color: #002b41;
			}
			head{
				display: block;
				text-align: center;
				padding: 3em 0 2em;
			}
			title{
				display: block;
				font-weight: 700;
				font-size: 2em;
				margin: 0.67em;
				line-height: 45px;
			}
			meta[name="discription"]{
				display: block;
				margin: 1em 0;
			}
			meta[name="discription"]:after{
				content: attr(content);
			}
			body{
				margin: 0;
				padding: 0 0 100px;
			}
			a{
				color: #0080ff;
				text-decoration: none;
			}
			input{
				outline: 0;
				font-size: 20px;
				line-height: 26px;
				text-align: center;

				padding: 8px 12px;
				border: 0;
				width: 80%;
				max-width: 300px;
				-webkit-appearance: none;
			}
			#恶臭{
				font-size: 24px;
				font-family: "Comic Sans MS", script;
				padding: 40px 10px 100px;
			}
			footer{
				padding: 80px 0;
				font-size: .8em;
				font-family: "Comic Sans MS", script;
				text-shadow: 0 1px 1px rgba(0,0,0,.2);
			}
			footer p{
				opacity: 0.5;
				padding: 20px 0;
			}
			footer a{
				margin: 0 .5em;
				color: inherit;
			}
		</style>
	</head>
	<body>
		<input id="输入的数字" placeholder="输入任意数字" type="number" />
		<div id="恶臭"></div>

		<footer>
			<p>仓库地址</p>
			<a href="https://github.com/fjqz177/homo.js" target="_blank">https://github.com/fjqz177/homo.js</a>
		</footer>

		<script src="./homo.js"></script>
		<script>
			输入的数字.oninput = _=>{
				const 数字 = 输入的数字.value === '' ? '' : Number(输入的数字.value);
				恶臭.innerHTML = 数字 +' = <big>'+ homo(数字) + '</big>';
				容器.setAttribute('数字',数字);
			};

			输入的数字.oninput();
		</script>
	</body>
</html>